<div class="searchBox">
    <input id="searchInput" type="text" placeholder="只需两步：搜索、下载  就这么简单" /><!--
    --><input id="searchButton" type="button" value="搜一下" />
</div>
<script>
    // /**
    //  * 内容改变时并不会触发事件，但是在失去焦点的时候会触发。
    //  */
    // $("#inputid").change(function () {
    //     console.log($(this).val());
    // });
    // /**
    //  * 只要文本类容发生改变，就会触发该事件
    //  */
    // $("#inputid").bind("input propertychange", function () {
    //     console.log($(this).val());
    // });

    // // 搜索框文字改变事件（实时）
    // $("#searchInput").bind("input propertychange", function () {
    //     if ($('#searchInput').val() !== "")
    //         $('#searchInput').val("这个功能还没做呢，再等等吧");
    // });

    // 搜索框获得焦点事件
    $('#searchInput').focus(() => {
        // $('#searchInput').val("");
        $('#searchInput').attr('placeholder', "在这里输入您想搜索的电子书吧")
    })

    // 搜索框失去焦点事件
    $('#searchInput').blur((that) => {
        // $('#searchInput').val("");
        $('#searchInput').attr('placeholder', "只需两步：搜索、下载  就这么简单")
    })

    // 文本框回车事件
    $('#searchInput').keydown(function (e) {
        var curKey = e.which;
        if (curKey == 13) {
            $("#searchButton").click();
            return false;
        }
    });

    // 搜索按钮点击事件
    if (location.pathname == "/" || !(window.history && history.pushState)) {
        // 首页 或者不支持 history.pushState
        $('#searchButton').click(function () {
            var searchBoxValue = $('#searchInput').val();
            if (!searchBoxValue || searchBoxValue.trim() == "") {
                searchBoxValue = "";
            }
            window.location.href = "./search?keyword=" + encodeURIComponent(searchBoxValue.trim());
        });
    } else {
        // 搜索页
        $('#searchButton').click(function () {
            var searchBoxValue = $('#searchInput').val();
            // 如果搜索内容未变化，则不搜索
            if (keyword == searchBoxValue.trim()) return;
            if (!searchBoxValue || searchBoxValue.trim() == "") {
                history.pushState({}, "", "./search"); // 第二个参数为保留参数
            } else {
                keyword = searchBoxValue.trim();
                history.pushState({}, "", "./search?keyword=" + encodeURIComponent(keyword));
                doSearch(keyword);
            }
        });

        window.addEventListener('popstate', function (event) {
            var requestParams = getParams();
            var keyword = (requestParams["keyword"] || "").trim();
            var searchbox = document.getElementById("searchInput");

            searchbox.value = keyword;
            doSearch(keyword);
        });
    }
</script>